<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 1000 + 'px'
			})
		</script>
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--自定义css-->
		<link rel="stylesheet" href="css/zui.css">
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon" ></a>
			<h1 class="mui-title">教你配对</h1>
		</header>
		<div id="app">
			<div class="mui-content" style="padding-top : 60px; margin-left:10px;margin-right: 10px;height: 100%">
				<div class="mui-card">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#"><h1>雷</h1></a>
							<div class="mui-collapse-content">
								<form class="mui-input-group">
									<div class="mui-input-row mui-checkbox mui-left">
										<label>丽莎</label>
										<input name="checkbox" value="1" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>北斗</label>
										<input name="checkbox" value="4" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>谢菲尔</label>
										<input name="checkbox" value="15" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>雷泽</label>
										<input name="checkbox" value="17" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>九条裟罗</label>
										<input name="checkbox" value="20" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>雷旅行者</label>
										<input name="checkbox" value="221" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>刻晴</label>
										<input name="checkbox" value="27" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>雷电将军</label>
										<input name="checkbox" value="36" type="checkbox">
									</div>
								</form>
							</div>
						</li>
					</ul>
				</div>
				<div class="mui-card">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#"><h1>火</h1></a>
							<div class="mui-collapse-content">
								<form class="mui-input-group">
									<div class="mui-input-row mui-checkbox mui-left">
										<label>安柏</label>
										<input name="checkbox" value="2" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>香菱</label>
										<input name="checkbox" value="5" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>辛炎</label>
										<input name="checkbox" value="6" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>烟菲</label>
										<input name="checkbox" value="13" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>班尼特</label>
										<input name="checkbox" value="18" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>托马</label>
										<input name="checkbox" value="21" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>迪卢克</label>
										<input name="checkbox" value="25" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>可莉</label>
										<input name="checkbox" value="26" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>宵宫</label>
										<input name="checkbox" value="35" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>胡桃</label>
										<input name="checkbox" value="40" type="checkbox">
									</div>
								</form>
							</div>
						</li>
					</ul>
				</div>
				<div class="mui-card">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#"><h1>水</h1></a>
							<div class="mui-collapse-content">
								<form class="mui-input-group">
									<div class="mui-input-row mui-checkbox mui-left">
										<label>行秋</label>
										<input name="checkbox" value="3" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>芭芭拉</label>
										<input name="checkbox" value="11" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>莫娜</label>
										<input name="checkbox" value="24" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>珊瑚宫心海</label>
										<input name="checkbox" value="37" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>达达利亚</label>
										<input name="checkbox" value="18" type="checkbox">
									</div>
								</form>
							</div>
						</li>
					</ul>
				</div>
				<div class="mui-card">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#"><h1>冰</h1></a>
							<div class="mui-collapse-content">
								<form class="mui-input-group">
									<div class="mui-input-row mui-checkbox mui-left">
										<label>凯亚</label>
										<input name="checkbox" value="7" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>迪奥娜</label>
										<input name="checkbox" value="10" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>重云</label>
										<input name="checkbox" value="12" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>罗莎莉亚</label>
										<input name="checkbox" value="19" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>七七</label>
										<input name="checkbox" value="28" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>甘雨</label>
										<input name="checkbox" value="29" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>神里绫华</label>
										<input name="checkbox" value="34" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>埃洛伊</label>
										<input name="checkbox" value="38" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>优菈</label>
										<input name="checkbox" value="42" type="checkbox">
									</div>
								</form>
							</div>
						</li>
					</ul>
				</div>
				<div class="mui-card">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#"><h1>岩</h1></a>
							<div class="mui-collapse-content">
								<form class="mui-input-group">
									<div class="mui-input-row mui-checkbox mui-left">
										<label>诺厄尔</label>
										<input name="checkbox" value="8" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>凝光</label>
										<input name="checkbox" value="16" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>岩旅行者</label>
										<input name="checkbox" value="222" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>钟离</label>
										<input name="checkbox" value="32" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>阿贝多</label>
										<input name="checkbox" value="41" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>五郎</label>
										<input name="checkbox" value="42" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>荒泷一斗</label>
										<input name="checkbox" value="44" type="checkbox">
									</div>
								</form>
							</div>
						</li>
					</ul>
				</div>
				<div class="mui-card">			
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#"><h1>风</h1></a>
							<div class="mui-collapse-content">
								<form class="mui-input-group">
									<div class="mui-input-row mui-checkbox mui-left">
										<label>砂糖</label>
										<input name="checkbox" value="9" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>早柚</label>
										<input name="checkbox" value="18" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>风旅行者</label>
										<input name="checkbox" value="223" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>琴</label>
										<input name="checkbox" value="23" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>温迪</label>
										<input name="checkbox" value="30" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>魈</label>
										<input name="checkbox" value="31" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>枫原万叶</label>
										<input name="checkbox" value="33" type="checkbox">
									</div>
								</form>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="mui-card">	
				<div class="mui-table-view" style="font-size:12px">
					 <li class="mui-table-view-cell" v-html="A"></li>
				</div>
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary" @click="all">全选</button>&nbsp;&nbsp;
				<button type="button" class="mui-btn mui-btn-warning" @click="search">搜索</button>&nbsp;&nbsp;
				<button type="button" class="mui-btn mui-btn-danger" @click="clean">清空</button>&nbsp;&nbsp;
			</div>
			<br/><br/><br/><br/><br/><br/>
			<div id="footer">
				教你配对 @{{year}} 
				<a href="https://zolty.blog.csdn.net/">zolty</a>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/index.min.js"></script>
		<script src="js/moment.min.js"></script>
		<script src="js/selectList.js"></script>	
		<script src="js/underscore-min.js"></script>
		<script>
			//将角色id转为角色名称
			function cn(target, array) {
			    for(var i = 0 ; i < array.length ; i++)
				{
					if(target == array[i][0])
						return array[i][2]
				}
			};
			Array.prototype.remove = function(val) { 
				var index = this.indexOf(val); 
				if (index > -1) { 
				this.splice(index, 1); 
				} 
			}; 
			var alist = [
				[5,3,18,36],
				[33,39,5,18],
				[34,24,30,10],
				[24,29,30,10],
				[40,32,3,41],
				[34,24,33,10],
				[36,20,33,18],
				[36,39,5,18],
				[29,32,5,18],
				[39,9,5,18],
				[36,33,5,18],
				[34,24,9,10],
				[33,3,5,18],
				[34,33,3,10],
				[34,30,3,10],
				[36,42,32,18],
				[31,23,32,41],
				[40,32,3,9],
				[36,40,32,3],
				[4,3,15,9],
				[33,40,32,3],
				[9,18,5,3],
				[40,32,3,5],
				[31,32,18,9],
				[24,29,33,10],
				[29,40,32,3],
				[34,40,32,3],
				[36,33,3,18],
				[30,40,32,3],
				[36,20,5,18],
				[34,29,37,30],
				[34,24,29,30],
				[40,3,32,12]
				];
			
			hlist = [
				//lei
				[1,"lisha","丽莎"],
				[4,"beidou","北斗"],
				[15,"feixieer","谢菲尔"],
				[17,"leize","雷泽"],
				[20,"jiutiaoshaluo","九条裟罗"],
				[221,"leilixingzhe","雷旅行者"],
				[27,"keqing","刻晴"],
				[36,"leidianjiangjun","雷电将军"],
				//huo
				[2,"anob","安柏"],
				[5,"xiangling","香菱"],
				[6,"xinyan","辛炎"],
				[13,"yanfei","烟菲"],
				[18,"banite","班尼特"],
				[21,"tuoma","托马"],
				[25,"diluke","迪卢克"],
				[26,"keli","可莉"],
				[35,"xiaogong","宵宫"],
				[40,"hutao","胡桃"],
				//shui
				[3,"xingqiu","行秋"],
				[11,"babala","芭芭拉"],
				[24,"mona","莫娜"],
				[37,"shanhugongxinhai","珊瑚宫心海"],
				[39,"dadaliya","达达利亚"],
				//bing
				[7,"kaiya","凯亚"],
				[10,"diaona","迪奥娜"],
				[12,"chongyun","重云"],
				[19,"luoshaliya","罗莎莉亚"],
				[28,"qiqi","七七"],
				[29,"ganyu","甘雨"],
				[34,"shenlilinhua","神里绫华"],
				[38,"ailuoyi","埃洛伊"],
				[42,"youla","优菈"],
				//yan
				[8,"nuoaier","诺厄尔"],
				[16,"ningguang","凝光"],
				[222,"yanlixingzhe","岩旅行者"],
				[32,"zhongli","钟离"],
				[41,"abeiduo","阿贝多"],
				[43,"wulang","五郎"],
				[44,"huanglongyidou","荒泷一斗"],
				//feng
				[9,"shatang","砂糖"],
				[18,"zaoyou","早柚"],
				[223,"fenglixingzhe","风旅行者"],
				[23,"qin","琴"],
				[30,"wendi","温迪"],
				[31,"xiao","魈"],
				[33,"fengyuanwanye","枫原万叶"]
			];
			var line = "<HR align=center width=300 color=#987cb9 SIZE=1>";
			var vm = new Vue({
				el: "#app",
				data: {
					Q : "",
					A : "Please check, Waiting for your search...",
					year : moment().format("YYYY")
				},
				methods: {
					all(){
						var inputs=document.getElementsByTagName("input");    //获取所有的input标签对象
						var checkboxArray = [];                               //初始化空数组，用来存放checkbox对象
						//遍历checkbox存入数组
						for(var i=0;i<inputs.length;i++){
							var obj=inputs[i];
							obj.checked = true;
						}
					},
					clean(){
						var inputs=document.getElementsByTagName("input");    //获取所有的input标签对象
						var checkboxArray = [];                               //初始化空数组，用来存放checkbox对象
						//遍历checkbox存入数组
						for(var i=0;i<inputs.length;i++){
							var obj=inputs[i];
							obj.checked = false;
						}
						this.A = "Please check, Waiting for your search...";
					},
					search() {
						this.A = ""
						var inputs=document.getElementsByTagName("input");    //获取所有的input标签对象
						var checkboxArray = [];                               //初始化空数组，用来存放checkbox对象
						//遍历checkbox存入数组
						for(var i=0;i<inputs.length;i++){
							var obj=inputs[i];
							if(obj.type=='checkbox' & obj.checked == true){
								checkboxArray.push(Number(obj.value))
							}
						};
						console.log(checkboxArray);
						var count = 0;
						for(var i =0; i< alist.length; i++)
						{
							if(checkboxArray.includes(alist[i][0]) && checkboxArray.includes(alist[i][1]) && checkboxArray.includes(alist[i][2]) && checkboxArray.includes(alist[i][3]))
							{
								checkboxArray.remove(alist[i][0]);
								checkboxArray.remove(alist[i][1]);
								checkboxArray.remove(alist[i][2]);
								checkboxArray.remove(alist[i][3]);
								console.log(checkboxArray);
								var res1 = cn(alist[i][0],hlist) + "," + cn(alist[i][1],hlist)  + "," + cn(alist[i][2],hlist)  + "," + cn(alist[i][3],hlist)
								console.log("res1: "+res1);
								for(var j = i + 1  ; j< alist.length; j++)
								{
									if(checkboxArray.includes(alist[j][0]) && checkboxArray.includes(alist[j][1]) && checkboxArray.includes(alist[j][2]) && checkboxArray.includes(alist[j][3]))
									{
										count +=1;
										var res2 = cn(alist[j][0],hlist) + "," + cn(alist[j][1],hlist)  + "," + cn(alist[j][2],hlist)  + "," + cn(alist[j][3],hlist)
										console.log("res2: "+res2);
										this.A += line + count + " : " + res1 + "<br/>" + res2 + "<br/>";
									}
								}
								checkboxArray.push(Number(alist[i][0]));
								checkboxArray.push(Number(alist[i][1]));
								checkboxArray.push(Number(alist[i][2]));
								checkboxArray.push(Number(alist[i][3]));
							}
						}
						if(checkboxArray.length<4)
							this.A += "很遗憾,你并不拥有超过4个角色!"
						else if(count == 0)
							this.A += "很遗憾没有推荐卡组,假设你有行秋/班尼特?"
						else
							this.A += line + "恭喜你,你共有 " + count + " 手选择去战斗!"
					}
				}
			});
		</script>
	</body>
</html>
